{include file="common/head"}

<div class="layout clearfix">
    <div class="navbar">
        <div style="padding: 16px;">
            <table class="layui-hide" id="test" lay-filter="test"></table>
        </div>
        <script type="text/html" id="toolbarDemo">
              <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm layui-bg-blue" lay-event="add">添加角色</button>
                <!-- <button class="layui-btn layui-btn-sm" lay-event="delCheck">删除选中</button> -->
              </div>
            </script>
        <script type="text/html" id="toolDemo">
              <div class="layui-clear-space">
                <a class="layui-btn layui-btn-xs layui-bg-orange" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-xs layui-bg-red" lay-event="del">删除</a>
            </div>
            </script>
    </div>
</div>
</div>
{include file="common/bottom"}
<script>
    layui.use(function () {
        var table = layui.table;
        var dropdown = layui.dropdown;
        var layer = layui.layer;
        var $ = layui.$;
        // 创建渲染实例
        table.render({
            elem: '#test',
            url: '/admin/role/list', // 此处为静态模拟数据，实际使用时需换成真实接口
            height: 'full', // 最大高度减去其他容器已占有的高度差
            toolbar: '#toolbarDemo',
            css: [ // 重设当前表格样式
                '.layui-table-tool-temp{padding-right: 145px;}'
            ].join(''),
            cellMinWidth: 80,
            totalRow: true, // 开启合计行
            page: true,
            parseData: function (res) {
                return {
                    "code": res.code, // 解析接口状态
                    "msg": res.data.message, // 解析提示文本
                    "count": res.data.count, // 解析数据长度
                    "data": res.data.list
                };
            },
            cols: [[
                // { type: 'checkbox', fixed: 'left' },
                { field: 'id', title: 'ID', width: 80, sort: true },
                {
                    field: 'name', title: '角色名称', width: 130, templet: function (d) {
                        if (d.name == '站长') {
                            return `<span class="layui-badge layui-bg-red">站长</span>`
                        } else {
                            return `<span class="layui-badge-rim">${d.name}</span>`

                        }
                    }
                },
                {
                    field: 'desc', title: '操作范围', width: 200, templet: function (d) {
                        if (d.name == '站长') {
                            return `<span class="layui-badge-rim">全部</span>`
                        } else {
                            return `<span class="layui-badge-rim">${d.desc}</span>`

                        }
                    }
                },
                { field: 'create_time', title: '发布时间', width: 200 },
                { fixed: 'right', title: '操作', width: 134, minWidth: 125, templet: '#toolDemo' }
            ]],
            done: function () {
                var id = this.id;
                // 下拉按钮测试
                dropdown.render({
                    elem: '#dropdownButton', // 可绑定在任意元素中，此处以上述按钮为例
                    data: [{
                        id: 'update',
                        title: '编辑'
                    }, {
                        id: 'delete',
                        title: '删除'
                    }],
                    // 菜单被点击的事件
                    click: function (obj) {
                        var checkStatus = table.checkStatus(id)
                        var data = checkStatus.data; // 获取选中的数据
                        switch (obj.id) {
                            case 'update':
                                if (data.length !== 1) return layer.msg('请选择一行');
                                layer.open({
                                    title: '编辑',
                                    type: 2,
                                    area: ['80%', '80%'],
                                    content: '/index/article/update/id/' + data.id
                                });
                            case 'delete':
                                if (data.length === 0) {
                                    return layer.msg('请选择一行');
                                }
                                layer.msg('delete event');
                                break;
                        }
                    }

                });
                // 头部工具栏事件

                table.on('toolbar(test)', function (obj) {
                    var options = obj.config; // 获取当前表格属性配置项
                    var checkStatus = table.checkStatus(options.id); // 获取选中行相关数据
                    switch (obj.event) { // 对应模板元素中的 lay-event 属性值
                        case 'add':
                            layer.open({
                                title: '添加角色'
                                , type: 2
                                ,area : ['80%' , '80%']
                                ,resize: false,
                                shadeClose: true
                                , content: '/admin/role/add'
                            })
                            break;
                        case 'delete':
                            layer.msg('删除');
                            break;
                    };

                });

                table.on('tool(test)', function (obj) { // 双击 toolDouble
                    var data = obj.data;
                    if (obj.event === 'edit') {
                        layer.open({
                            title: '编辑',
                            type: 2,
                            area: ['80%', '80%'],
                            content: '/admin/role/update/id/' + data.id
                        });

                    } else if (obj.event === 'del') {
                        var con = layer.confirm('确定要删除这个角色吗？', () => {
                            $.ajax({
                                url: '/admin/role/del/id/' + data.id
                                , success: (res) => {
                                    if (res.code == 200) {
                                        layer.msg('删除成功', { icon: 6 })
                                        obj.del()
                                    } else {
                                        layer.msg('删除失败：'+res.message, { icon: 5 })
                                    }
                                }
                                , error: (res) => {
                                    layer.msg('网络或服务器异常，请稍后再试')
                                }
                            })
                            layer.close(con)
                        })

                    }
                });

            },
            error: function (res, msg) {
                console.log(res, msg)
            }
        });

        // 触发表格复选框选择
        table.on('checkbox(test)', function (obj) {
            console.log(obj)
        });

        // 触发表格单选框选择
        table.on('radio(test)', function (obj) {
            console.log(obj)
        });

        // 行单击事件
        table.on('row(test)', function (obj) {
            //console.log(obj);
            //layer.closeAll('tips');
        });
        // 行双击事件
        table.on('rowDouble(test)', function (obj) {
            console.log(obj);
        });

        $('#search').click(() => {
            var title = $('#title').val()
            table.reload('test', {
                where: {
                    title: title
                },
            }, true);
        })
    });
</script>